<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<meta charset="utf-8">
<head>
    <link type="text/css" href="${pageContext.request.contextPath}/css/booksClass.css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var save;
            //选择分类功能
            $("a>li").each(function () {
                $(this).click(function () {
                    $("[id=pages1]").html(1)
                    var titleTwoId=$(this).next("input").val();
                    $("option:eq(0)").attr({"selected":"selected"})
                    $.ajax({
                        type:"get",
                        url:"/login/booksClassServlet",
                        dataType:"json",
                        data:{
                            "doType":"doQuery",
                            "type":"ajax",
                            "titleTwoId":titleTwoId,
                            "flag":"data"
                        },
                        success:function (data) {

                            var temp=""
                            for(var i=0;i<data.length;i++){
                                save=data[i].pricing-data[i].price;
                                temp+=
                            "<div class=\"div1\">"+
                                    "<a href=\"/login/booksDetailsServlet?doType=doQuery&bookId="+data[i].bookId+"\"><img src=\"${pageContext.request.contextPath}/"+data[i].cover+"\"></a>"+
                                    "<div class=\"div2\">"+
                                    "<p class=\"p2\"><a href=\"/login/booksDetailsServlet?doType=doQuery&bookId="+data[i].bookId+"\">"+data[i].book+"</a></p>"+
                                "<p>顾客评分：100</p>"+
                               " <p>作者："+data[i].writer+"<br>出版社："+data[i].press+"&nbsp&nbsp&nbsp&nbsp&nbsp出版时间："+data[i].publicationTime+"</p>"+
                                "<p>"+data[i].intro+"</p>"+
                                    "<span class=\"span1\"> <span class=\"span3\">￥"+data[i].pricing+"</span>  <span style=\"color: red\">￥"+data[i].price+"</span> 节省：￥"+save+"<span class=\"save\"></span>  库存："+data[i].repertory+"<input type=\"image\" src=\"${pageContext.request.contextPath}/images/goumai.png\" class=\"image\">"+
                                    "<input type=\"hidden\" value=\""+data[i].bookId+"\">"+
                                    "<input type=\"hidden\" value=\""+data[i].book+"\">"+
                                    "<input type=\"hidden\" value=\""+data[i].cover+"\">"+
                                    "<input type=\"hidden\" value=\""+data[i].pricing+"\">"+
                                    "<input type=\"hidden\" value=\""+data[i].price+"\">"+
                                    "</span> <br>"+
                                    "<span class=\"span2\"></span>"+
                                "</div>"+
                                "</div>"

                            }
                            $("[id=content]").html(temp);
                                buy();
                            $.ajax({
                                type:"get",
                                url:"/login/booksClassServlet",
                                data:{
                                    "doType":"doQuery",
                                    "type":"ajax",
                                    "titleTwoId":titleTwoId,
                                    "flag":"pages"
                                },
                                success:function (data) {
                                    $("[id=pages2]").text(data)
                                }
                            })
                        }
                    })

                })
            })

            //排序功能
            $("select").change(function () {
                $("[id=pages1]").html(1)
                var sortType=$("select option:selected").val()
                $.ajax({
                    type:"get",
                    url:"/login/booksClassServlet",
                    dataType:"json",
                    data:{
                        "doType":"doQuery",
                        "sortType":sortType,
                        "type":"",
                    },
                    success:function (data) {
                        var temp=""
                        for(var i=0;i<data.length;i++){
                            save=data[i].pricing-data[i].price;
                            temp+=
                                "<div class=\"div1\">"+
                                "<a href=\"/login/booksDetailsServlet?doType=doQuery&bookId="+data[i].bookId+"\"><img src=\"${pageContext.request.contextPath}/"+data[i].cover+"\"></a>"+
                                "<div class=\"div2\">"+
                                "<p class=\"p2\"><a href=\"/login/booksDetailsServlet?doType=doQuery&bookId="+data[i].bookId+"\">"+data[i].book+"</a></p>"+
                                "<p>顾客评分：100</p>"+
                                " <p>作者："+data[i].writer+"<br>出版社："+data[i].press+"&nbsp&nbsp&nbsp&nbsp&nbsp出版时间："+data[i].publicationTime+"</p>"+
                                "<p>"+data[i].intro+"</p>"+
                                "<span class=\"span1\"> <span class=\"span3\">￥"+data[i].pricing+"</span>  <span style=\"color: red\">￥"+data[i].price+"</span> 节省：￥"+save+"<span class=\"save\"></span>  库存："+data[i].repertory+"<input type=\"image\" src=\"${pageContext.request.contextPath}/images/goumai.png\" class=\"image\">"+
                                "<input type=\"hidden\" value=\""+data[i].bookId+"\">"+
                                "<input type=\"hidden\" value=\""+data[i].book+"\">"+
                                "<input type=\"hidden\" value=\""+data[i].cover+"\">"+
                                "<input type=\"hidden\" value=\""+data[i].pricing+"\">"+
                                "<input type=\"hidden\" value=\""+data[i].price+"\">"+
                                "</span> <br>"+
                                "<span class=\"span2\"></span>"+
                                "</div>"+
                                "</div>"
                        }
                        $("[id=content]").html(temp);
                        buy();
                    }
                })
            })

            //翻页功能
            var start;
            var pages;
            var nowPages;
            $("[type=image]:eq(0)").click(function () {
                pages=$("[id=pages2]").html()
                nowPages=$("[id=pages1]").html()-1
                start=2*nowPages
                start-=2
                if(0<nowPages){
                    $("[id=pages1]").html(nowPages)
                    $.ajax({
                        type:"get",
                        url:"/login/booksClassServlet",
                        dataType:"json",
                        data:{
                            "doType":"doQuery",
                            "type":"paging",
                            "start":start
                        },
                        success:function (data) {
                            var temp=""
                            for(var i=0;i<data.length;i++){
                                save=data[i].pricing-data[i].price;
                                temp+=
                                    "<div class=\"div1\">"+
                                    "<a href=\"/login/booksDetailsServlet?doType=doQuery&bookId="+data[i].bookId+"\"><img src=\"${pageContext.request.contextPath}/"+data[i].cover+"\"></a>"+
                                    "<div class=\"div2\">"+
                                    "<p class=\"p2\"><a href=\"/login/booksDetailsServlet?doType=doQuery&bookId="+data[i].bookId+"\">"+data[i].book+"</a></p>"+
                                    "<p>顾客评分：100</p>"+
                                    " <p>作者："+data[i].writer+"<br>出版社："+data[i].press+"&nbsp&nbsp&nbsp&nbsp&nbsp出版时间："+data[i].publicationTime+"</p>"+
                                    "<p>"+data[i].intro+"</p>"+
                                    "<span class=\"span1\"> <span class=\"span3\">￥"+data[i].pricing+"</span>  <span style=\"color: red\">￥"+data[i].price+"</span> 节省：￥"+save+"<span class=\"save\"></span>  库存："+data[i].repertory+"<input type=\"image\" src=\"${pageContext.request.contextPath}/images/goumai.png\" class=\"image\">"+
                                    "<input type=\"hidden\" value=\""+data[i].bookId+"\">"+
                                    "<input type=\"hidden\" value=\""+data[i].book+"\">"+
                                    "<input type=\"hidden\" value=\""+data[i].cover+"\">"+
                                    "<input type=\"hidden\" value=\""+data[i].pricing+"\">"+
                                    "<input type=\"hidden\" value=\""+data[i].price+"\">"+
                                    "</span> <br>"+
                                    "<span class=\"span2\"></span>"+
                                    "</div>"+
                                    "</div>"
                            }
                            $("[id=content]").html(temp);
                            buy();
                        }
                    })
                }
            })

            $("[type=image]:eq(1)").click(function () {
                pages=$("[id=pages2]").html()-1
                nowPages=$("[id=pages1]").html()
                start=2*nowPages-2
                start+=2
                if(pages>=nowPages){
                    nowPages=nowPages-1+2
                    $("[id=pages1]").html(nowPages)
                    $.ajax({
                        type:"get",
                        url:"/login/booksClassServlet",
                        dataType:"json",
                        data:{
                            "doType":"doQuery",
                            "type":"paging",
                            "start":start
                        },
                        success:function (data) {
                            var temp=""
                            for(var i=0;i<data.length;i++){
                                save=data[i].pricing-data[i].price;
                                temp+=
                                    "<div class=\"div1\">"+
                                    "<a href=\"/login/booksDetailsServlet?doType=doQuery&bookId="+data[i].bookId+"\"><img src=\"${pageContext.request.contextPath}/"+data[i].cover+"\"></a>"+
                                    "<div class=\"div2\">"+
                                    "<p class=\"p2\"><a href=\"/login/booksDetailsServlet?doType=doQuery&bookId="+data[i].bookId+"\">"+data[i].book+"</a></p>"+
                                    "<p>顾客评分：100</p>"+
                                    " <p>作者："+data[i].writer+"<br>出版社："+data[i].press+"&nbsp&nbsp&nbsp&nbsp&nbsp出版时间："+data[i].publicationTime+"</p>"+
                                    "<p>"+data[i].intro+"</p>"+
                                    "<span class=\"span1\"> <span class=\"span3\">￥"+data[i].pricing+"</span>  <span style=\"color: red\">￥"+data[i].price+"</span> 节省：￥"+save+"<span class=\"save\"></span>  库存："+data[i].repertory+"<input type=\"image\" src=\"${pageContext.request.contextPath}/images/goumai.png\" class=\"image\">"+
                                    "<input type=\"hidden\" value=\""+data[i].bookId+"\">"+
                                    "<input type=\"hidden\" value=\""+data[i].book+"\">"+
                                    "<input type=\"hidden\" value=\""+data[i].cover+"\">"+
                                    "<input type=\"hidden\" value=\""+data[i].pricing+"\">"+
                                    "<input type=\"hidden\" value=\""+data[i].price+"\">"+
                                    "</span> <br>"+
                                    "<span class=\"span2\"></span>"+
                                    "</div>"+
                                    "</div>"
                            }
                            $("[id=content]").html(temp);
                            buy();
                        }
                    })
                }
            })
            buy();
        })
        //购买功能
        function buy() {
            $(".image").each(function () {
                $(this).click(function () {
                    var bookId=$(this).next().val();
                    var book=$(this).next().next().val();
                    var cover=$(this).next().next().next().val();
                    var pricing=$(this).next().next().next().next().val();
                    var price=$(this).next().next().next().next().next().val();
                    var node=$(this).closest("span");
                    $.ajax({
                        type:"post",
                        url:"/login/cartServlet",
                        data:{
                            "doType":"doInsert",
                            "bookId":bookId,
                            "book":book,
                            "cover":cover,
                            "pricing":pricing,
                            "price":price,
                            "number":1
                        },
                        success:function (data) {
                            if(data=="成功添加到购物车!"){
                                node.next().next("span").html("<a href=\"${pageContext.request.contextPath}/login/cartServlet?doType=doQuery\"> 购买成功，点击此处查看购物车</a>")
                            }else {
                                alert(data)
                            }
                        }
                    })
                })
            })
        }
    </script>
   <title>图书分类</title>
</head>
<body >
    <div id="container" align="center">
        <!--页面头部栏-->
        <div id="head">
            <iframe src="${pageContext.request.contextPath}/head.jsp" width="100%" height="100%" scrolling="no" frameborder="0">
            </iframe>
        </div>

        <!--图书详情栏-->
        <div id="center">
            <div id="left">
                <h3>分类浏览</h3>
                <ul>
                        <li>全部（${gross}）</li>
                    <c:forEach items="${titleTwos}" var="titleTwo">
                        <a href="#">
                            <li>${titleTwo.title}

                                <c:forEach items="${bookSizes}" var="bookSize">
                                    <c:if test="${titleTwo.id==bookSize.titleId}">
                                        （<span>${bookSize.number}</span>）
                                    </c:if>
                                </c:forEach>
                            </li>
                            <input type="hidden" value="${titleTwo.id}">
                        </a>

                    </c:forEach>
                </ul>
            </div>

            <div id="right">
                <p id="p1">
                    排序方式
                    <select>
                        <option value="synthesize">综合</option>
                        <option value="time">按上架时间降序</option>
                        <option value="sales">按销量降序</option>
                    </select>
                    <span id="span"><input type="image" src="${pageContext.request.contextPath}/images/qian.png" class="input">&nbsp&nbsp<span id="pages1">1</span>页/共<span id="pages2">${pages}</span>页&nbsp&nbsp<input type="image" src="${pageContext.request.contextPath}/images/hou.png" class="input"></span>
                </p>
                <div id="content">
                    <c:forEach items="${books}" var="book">
                        <div class="div1">
                            <a href="/login/booksDetailsServlet?doType=doQuery&bookId=${book.bookId}"><img src="${pageContext.request.contextPath}/${book.cover}"></a>
                            <div class="div2">
                                <p class="p2"><a href="/login/booksDetailsServlet?doType=doQuery&bookId=${book.bookId}">${book.book}</a></p>
                                <p>顾客评分：100</p>
                                <p>作者：${book.writer}<br>出版社：${book.press}&nbsp&nbsp&nbsp&nbsp&nbsp出版时间：${book.publicationTime}</p>
                                <p>${book.intro}</p>
                                <span class="span1"> <span class="span3">￥${book.pricing}</span>  <span style="color: red">￥${book.price}</span> 节省：￥${book.pricing-book.price}  库存：${book.repertory}<input type="image" src="${pageContext.request.contextPath}/images/goumai.png" class="image">
                                <input type="hidden" value="${book.bookId}">
                                <input type="hidden" value="${book.book}">
                                <input type="hidden" value="${book.cover}">
                                <input type="hidden" value="${book.pricing}">
                                <input type="hidden" value="${book.price}">
                                </span> <br>
                                <span class="span2"></span>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>

        <!--页面脚注栏-->
        <div id="foot">
            <iframe src="${pageContext.request.contextPath}/foot.jsp" width="100%" height="100%" scrolling="no" frameborder="0">
            </iframe>
        </div>
    </div>
</body>
</html>
